<template>
  <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
    <div class="box shadow-sm border rounded bg-white mb-3">
      <div class="box-title border-bottom p-3">
        <h6 class="m-0">关于Ta</h6>
      </div>
      <div class="box-body p-3">
        <p>{{userinfo.self_introduction}}</p>
      </div>
    </div>
    <div class="box mb-3 shadow-sm border rounded bg-white osahan-post">
      <div class="p-3 d-flex align-items-center border-bottom osahan-post-header">
        <div class="dropdown-list-image mr-3">
          <img class="rounded-circle" src="http://localhost:3001/file/pyq.png" alt="">
        </div>
        <div class="font-weight-bold">
          <div class="text-truncate">{{userinfo.user_name}}的动态</div>
          <div class="small text-gray-500">Internet | 24,044 followers</div>
        </div>
      </div>
      <div class="p-3 osahan-post-body" id="myStyle">
        <div v-loading="!oMoodStore.o" element-loading-text="拼命加载中" class="mainList">
          <div v-for="(item, index) in MoodList" :key="index">
            <MainmoodList @likeNumChange="likeNumChange($event, item)" :Iteminfo="item" >
            </MainmoodList>
          </div>
        </div>
      </div>
      <div class="overflow-hidden border-top text-center">
        <div class="text-primary small p-1" @click="more"> 更多 </div>
      </div>
    </div>
    <!-- <div class="box shadow-sm border rounded bg-white mb-3">
      <div class="box-title border-bottom p-3">
        <h6 class="m-0">成就
          <svg class="icon" aria-hidden="true" style="width: 10%;height: 20px;">
            <use xlink:href="#icon-a-chengjichengjiuzilijiangbeishu"></use>
          </svg>
          & 徽章
          <svg class="icon" aria-hidden="true" style="width: 10%;height: 20px;">
            <use xlink:href="#icon-ziyuan"></use>
          </svg></h6>
      </div>
      <div class="box-body">
        <table class="table table-borderless mb-0">
          <tbody>
            <tr class="border-bottom">
              <th class="p-3">内侧大玩家</th>
              <td class="p-3">第一批内测玩家2022虎年！我们一起加油！ </td>
            </tr>
            <tr class="border-bottom">
              <th class="p-3">进阶的Mood粉</th>
              <td class="p-3">进阶的Mooder！冲！！冲！冲！！</td>
            </tr>
            <tr class="border-bottom">
              <th class="p-3">有头有脸有身份</th>
              <td class="p-3">资料完整度很强 详细资料+签名+头像 </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div> -->

  </main>
</template>

<script>
import MainmoodList from '../index/main_moodList.vue';

export default {
  props: ['userinfo'],
  data() {
    return {
      oMoodStore: this.newStore,
      MoodList: [],
      moodNum: 0,
    };
  },
  components: {
    MainmoodList,
  },
  created() {
    this.spost(this.oMoodStore, "/Mood/getMoodList", {
      type: 'o1', user_id: this.$route.query.id, moodNum: this.moodNum, Moodlength: 5,
    })
      .then((res) => {
        this.MoodList = res.d.MoodList;
      });
  },
  methods: {
    more() {
      alert('功能待完善中~谅解');
    },
    likeNumChange(num, item) {
      item.likeNum = num;
    },
  },
};
</script>

<style scoped lang="scss">

</style>
